import Taro, {Component} from '@tarojs/taro'
import {View, Text, Image} from '@tarojs/components'
import request from '../utils/request'
import './mine.scss'
import avatar_img from '../../images/user/avatar_url.png'
import my_bg from '../../images/user/my_bg.png'
import info_enterprise from '../../images/user/info_enterprise.png'
import arrow_right from '../../images/user/arrow_right.png'
import about from '../../images/user/about.png'

export default class Mine extends Component {

  config = {
    navigationBarTextStyle: 'white',
    navigationStyle: 'custom',
    usingComponents: {
      'picker': '../../components/picker/picker'
    }
  }

  constructor(props) {
    super(props);
    this.state = {
      customers: [],
      currentCustomer: {},
      array: [[]],
      index: [0],
      showPicker: false
    };
  }

  componentDidMount() {
    let url = '/loudi-poc/customer/list';
    request.get(url).then((res) => {
      let {data} = res.data;
      let arrayData = data.map((item) => {
        return item.customerName;
      });
      let currentCustomer = Taro.getStorageSync('currentCustomer') || data[0];
      this.setState({
        array: [arrayData],
        customers: data,
        currentCustomer
      })
    })
  }

  tapInfo() {
    Taro.navigateTo({
      url: './info?customer=' + JSON.stringify(this.state.currentCustomer)
    })
  }

  tapAbout() {
    Taro.navigateTo({
      url: './about'
    })
  }

  change(e) {
    this.setState({
      currentCustomer: this.state.customers[e.detail.value]
    })
  }

  showPicker() {
    // Taro.hideTabBar();
    this.setState({
      showPicker: !this.state.showPicker,
    })
  }

  sure(e) {
    let index = e.detail.choosedIndexArr[0];
    let currentCustomer = this.state.customers[index];
    Taro.setStorage({ key: 'currentCustomer', data: currentCustomer }); //将客户信息存储到缓存中
    // Taro.showTabBar();
    this.setState({
      showPicker: false,
      currentCustomer
    })
  }

  cancel() {
    Taro.showTabBar();
    this.setState({
      showPicker: false
    })
  }
  render() {
    return (
      <View className='container'>
        <Image className='my_bg' src={my_bg} />
        <View className='info'>
          <Image className='avatarUrl' src={avatar_img} />
          <Text className='companyName'>{this.state.currentCustomer.customerName}</Text>
        </View>
        <View className='lists'>
          <View className='list' onClick={this.tapInfo}>
            <Image className='icon' src={info_enterprise} />
            <View className='info_enterprise des'>企业信息</View>
            <Image className='arrow_right' src={arrow_right} />
          </View>
          <View className='list' onClick={this.tapAbout}>
            <Image className='icon' src={about} />
            <View className='about des'>关于我们</View>
            <Image className='arrow_right' src={arrow_right} />
          </View>
        </View>
        <View className='picker'>
          <Text onClick={this.showPicker} className='switch_enterprise'>切换企业</Text>
          <picker
            isShowPicker={this.state.showPicker}
            listData={this.state.array}
            defaultPickData={this.state.index}
            className='picker'
            mode='selector'
            titleText='切换企业'
            titleStyle='font-size: 18px; font-weight: 400; font-family: PingFangSC-Regular,PingFang SC; line-height:26px;'
            sureText='完成'
            sureStyle='font-size: 18px; color: rgba(213,143,67,1); line-height: 26px; font-weight: 400'
            cancelStyle='font-size: 18px; color: rgba(27,27,78,0.65); line-height: 26px; font-weight: 400'
            indicatorStyle='height:45px'
            onsure={this.sure}
            oncancle={this.cancel}
          >
          </picker>
        </View>
      </View>
    )
  }
}
